<template>
  <main class="article-detail-page" role="main">
    <!-- SEO优化的文章结构 -->
    <article class="article-wrapper">
      <sg-article-detail @article-loaded="handleArticleLoaded" />
    </article>
  </main>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import { useRoute } from "vue-router";
import SgArticleDetail from "@/views/components/SgArticleDetail/index.vue";
import { setSEO, setArticleStructuredData } from "@/utils/seo";

const route = useRoute();
const articleData = ref<any>(null);

// 设置默认SEO
onMounted(() => {
  setSEO({
    title: "文章详情",
    description: "阅读数知笔记的技术文章，获取最新的编程教程、开发经验和技术见解。",
    keywords: "技术文章,编程教程,开发经验,技术博客,数知笔记",
    canonicalUrl: window.location.origin + route.fullPath,
  });
});

// 处理文章加载完成
const handleArticleLoaded = (article: any) => {
  articleData.value = article;
  
  if (article) {
    // 设置文章特定的SEO
    setSEO({
      title: article.title,
      description: article.summary || article.description || `阅读《${article.title}》- 数知笔记技术文章`,
      keywords: `${article.title},${article.tags?.join(',') || ''},技术文章,编程教程`,
      ogTitle: article.title,
      ogDescription: article.summary || article.description,
      ogImage: article.coverImage || '/default-article-image.jpg',
      canonicalUrl: window.location.origin + route.fullPath,
    });

    // 设置文章结构化数据
    setArticleStructuredData({
      title: article.title,
      description: article.summary || article.description || '',
      author: article.author || '数知笔记',
      publishDate: article.publishDate || article.createTime,
      modifiedDate: article.updateTime,
      image: article.coverImage,
      url: window.location.href,
    });
  }
};
</script>

<style scoped lang="scss">
.article-detail-page {
  min-height: 100vh;
  background: linear-gradient(
    to bottom,
    rgba(249, 250, 251, 0.8),
    rgba(243, 244, 246, 0.9)
  );
}

.article-wrapper {
  width: 100%;
  max-width: 100%;
}
</style>
